<template>
	<!-- 头部居顶 -->
	<view class="fixed-layout">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" focus placeholder="点击搜索雪茄" />
		</view>
		<!-- 排序标签 -->
		<view class="list-sort-bar posts-sort">
			<!-- <button class="sort-button selected">常规雪茄</button>
			<button class="sort-button">年度限量</button>
			<button class="sort-button">地区限量</button>
			<button class="sort-button">停产款</button>
			<button class="sort-button">稀有款</button>
			<button class="sort-button">环标</button> -->
			<h-com-tab :changeIndex="changeIndex" :tabName="TabName"></h-com-tab>
		</view>
		
		<!-- 筛选列 -->
		<view class="list-sort-bar controller-bar">
			<view class="center-content">
				<view class="filter-item">
				地区：<view class="filter-controller address">全部</view>
				</view>
				<view class="filter-item">
				年份：<view class="filter-controller year">2000</view>
				</view>
			</view>
		</view>
	</view>
	<view class="content">
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 雪茄列表 -->
		<view class="cigar-slider" v-show="style.TabName[0].bool">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in changgui">
					<view class="cigar-photo">
						<image src="../../static/temp-cigar-photo-1.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">Bolivar Libertador-LCDH</view>
						<view class="cn-name">解放者 LCDH</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cigar-slider">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in changeData">
					<view class="cigar-photo">
						<image :src="item.picUrl" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">{{item.guanName}}</view>
						<view class="cn-name">{{item.nickName}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="cigar-slider" v-show="style.TabName[2].bool">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in diqu">
					<view class="cigar-photo">
						<image src="../../static/temp-cigar-photo-1.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">Bolivar Libertador-LCDH</view>
						<view class="cn-name">解放者 LCDH</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cigar-slider" v-show="style.TabName[3].bool">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in tingchan">
					<view class="cigar-photo">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">Bolivar Libertador-LCDH</view>
						<view class="cn-name">解放者 LCDH</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cigar-slider" v-show="style.TabName[4].bool">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in xiyou">
					<view class="cigar-photo">
						<image src="../../static/temp-cigar-photo-1.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">Bolivar Libertador-LCDH</view>
						<view class="cn-name">解放者 LCDH</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cigar-slider" v-show="style.TabName[5].bool">
			<view class="rotate-slider">
				<view class="list-item" v-for="item in huanbiao">
					<view class="cigar-photo">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view>
						<view class="en-name">Bolivar Libertador-LCDH</view>
						<view class="cn-name">解放者 LCDH</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cigar-ring-list">
			<view class="list-item">
				<view class="cigar-ring-photo hight-fix-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="info-item">
						<view class="item-name">英文名：</view>
						<view class="item-content">Standard Band A</view>
					</view>
					<view class="info-item">
						<view class="item-name">中文名：</view>
						<view class="item-content">A标</view>
					</view>
					<view class="info-item">
						<view class="item-name">使用时间：</view>
						<view class="item-content">1960年 - 至今</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="cigar-ring-photo hight-fix-img">
					<image src="../../static/cigar-ring-01.webp" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="info-item">
						<view class="item-name">英文名：</view>
						<view class="item-content">Standard Band A</view>
					</view>
					<view class="info-item">
						<view class="item-name">中文名：</view>
						<view class="item-content">A标</view>
					</view>
					<view class="info-item">
						<view class="item-name">使用时间：</view>
						<view class="item-content">1960年 - 至今</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-empty empty-wiki-bg">
			这里还没有收录信息～
		</view> -->
	</view>

</template>
<script setup lang="ts">
	import {
		HttpMethod,
		httpUtil
	} from "@/common/netWork/httpUtil"
	// ICigar
	import type {
		ICigar
	} from "@/logic/globInterface/dataInterface"
	import {
		HTTP_API_URL
	} from '@/common/consts/Consts'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
import { onLoad } from "@dcloudio/uni-app";
	// import Tool from "@/common/utils/Tool";
	interface TABNAME{
		name:string,
		bool:boolean,
		id:number,
		pkId:string
	}
	let data = ref([] as Array<ICigar>)
	let msgCigarList = ref([] as Array<ICigar>)
	
	
	let changgui = ref([] as Array<ICigar>)
	let niandu = ref([] as Array<ICigar>)
	let diqu = ref([] as Array<ICigar>)
	let tingchan = ref([] as Array<ICigar>)
	let xiyou = ref([] as Array<ICigar>)
	let huanbiao = ref([] as Array<ICigar>)
	
	
	let changeData = ref([] as Array<ICigar>)
	
	let bpkId = ref('')
	let TabName = ref([] as Array<TABNAME>)
	const style = reactive({
		bool:false,
		TabName: [{
				id: 0,
				name: '常规雪茄',
				bool: true
	
			},
			{
				id: 1,
				name: '年度限量',
				bool: false
			},
			{
				id: 2,
				name: '地区限量',
				bool: false
			},
			{
				id: 3,
				name: '停产款',
				bool:false
			},
			{
				id: 4,
				name: '稀有款',
				bool: false
			},
			{
				id: 5,
				name: '环标',
				bool: false
			}
		],
		brandType:''
	})
	async function brandListData(){
		let res = await httpUtil.request(HTTP_API_URL.MSG_BRANDLIST,HttpMethod.POST);
		data.value = JSON.parse(res.data)
		let glArr = JSON.parse(res.data).filter((item:any)=> item.bpkId == bpkId.value)
		console.log(glArr)
		glArr.map((item:any,index:number)=>{
			TabName.value.push({
				name:item.seriesName,
				id:index,
				bool:!index,
				pkId:item.pkId || ''
			})
		})
		console.log(TabName.value)
		// data.value.forEach((item)=>{
		// 	switch (item.seriesName){
		// 		case "常规雪茄":
		// 			changgui.value.push(item);
		// 			break;
		// 		case "年度限量":
		// 			niandu.value.push(item);
		// 			break;
		// 		case "地区限量":
		// 			diqu.value.push(item);
		// 			break;
		// 		case "停产款":
		// 			tingchan.value.push(item);
		// 			break;
		// 		case "稀有款":
		// 			xiyou.value.push(item);
		// 			break;
		// 		default:
		// 			huanbiao.value.push(item);
		// 	}
		// })
		// console.log('changgui',changgui.value)
		// console.log('niandu',niandu.value)
		// console.log('diqu',diqu.value)
		// console.log('tingchan',tingchan.value)
		// console.log('xiyou',xiyou.value)
		// console.log('huanbiao',huanbiao.value)
	}
	async function imageData(){
	  let img = await httpUtil.request(HTTP_API_URL.MSG_CIGARLIST,HttpMethod.POST)
	  msgCigarList.value = JSON.parse(img.data).filter((item:any)=> item.bpkId == bpkId.value)
	  let id = msgCigarList.value[0].bsPkId
	  getListByBsPkId(msgCigarList.value,id)
	 }
	 // 根据bsPkId将数据分类
	function getListByBsPkId(item:any,pkId:any){
		console.log(item,pkId)
		changeData.value = JSON.parse(JSON.stringify(item)).filter((iItem:any)=> iItem.bsPkId==pkId)
		console.log('arr',changeData.value)
	}
	//tab选项卡
	function setTabBar(key: any,item:any) {
		for (let i = 0; i < TabName.value.length; i++) {
			TabName.value[i].bool = false
			if (i == key) {
				// loadCubaData(key)
				TabName.value[key].bool = true
				getListByBsPkId(msgCigarList.value,item.pkId)
			}
		}
	}
	function changeIndex (index:any,item:any) {
		setTabBar(index,item)
	}
	onLoad((options:any)=>{
		bpkId.value = options.id
	})
	
	onMounted(async() => {
		 await brandListData()
		 await imageData()
		 console.log("进来啦");
	})
</script>